<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>#{usuariologin.usuario.nome} #{usuariologin.usuario.sobrenome}</title>
        <link rel="stylesheet" type="text/css" href="../styles/usuario.css" media="all"/>
    </h:head>
    <h:body>
        <div id="cabecalho-usuario">

            <div id="cabecalho-conteudo">
                <div id="cabecalho-usuario-esquerda">                    
                    <p:graphicImage styleClass="cabecalho-usuario-esquerda" value="/images/logo.png"/>
                </div>



                <div id="cabecalho-usuario-logout">                
                    <p:graphicImage styleClass="cabecalho-usuario-shortimage" library="usuario" name="#{usuariologin.usuario.foto}"/>
                    <h:outputText id="logout-nome" value="#{usuariologin.usuario.nome}"/>


                    <p:megaMenu styleClass="megaMenu">
                        <p:submenu>

                            <p:column>
                                <p:graphicImage library="usuario" name="#{usuariologin.usuario.foto}"/>
                            </p:column>
                            <p:column>

                                <h:form><h:link value="Configurar" outcome="/usuario/paginaConfigurarPerfil.xhtml" /></h:form>
                                <p:separator/>
                                <h:form><p:commandLink value="Logout" action="#{usuariologin.logout()}"/></h:form>

                            </p:column>

                        </p:submenu>    
                    </p:megaMenu>
                </div>
            </div>
        </div>

        <div id="estrutura">

            <div id="conteudo-usuario">                

                <div id="conteudo-left">
                    <div id="conteudo-left-foto">                      
                        <p:graphicImage library="usuario" name="#{usuariologin.usuario.foto}"/>                        
                    </div>
                    <div id="conteudo-left-descricao">
                        <h:outputText styleClass="fonteDestacada" value="#{usuariologin.usuario.nome} #{usuariologin.usuario.sobrenome}"/>                        
                    </div>

                    <div id="conteudo-left-menu">          

                        <h:form>
                            <p:menu model="#{usuariologin.model}" styleClass="conteudo-left-menu"/>
                        </h:form>

                    </div>
                </div>    

                <div id="conteudo-center">                    

                    <div class="box-postagem">
                        <h:form styleClass="postador">
                            <p:inputTextarea rows="1" cols="33" label="Digite um comentário" value="#{usuariologin.conteudoPostagem}" />
                            <p:commandButton styleClass="botaocaixa" value="Postar" action="#{usuariologin.fazpostagem()}" update=":postifc, :post"/>
                        </h:form>
                    </div> 
                    <!--Fim do Status-->

                    <div id="timeline">
                        <h:form id="post" enctype="multipart/form-data">
                            <ui:repeat id="repeat" value="#{usuariologin.listaPostagens}" var="postagem"  >
                                <div class="box-postagem">                            
                                    <!--                                Aqui é impresso as postagens-->
                                    <div class="box-postagem-cabecalho">
                                        <!--Imagem e data das postagens-->
                                        <p:graphicImage styleClass="box-postagem-imgshortcut" library="usuario" name="#{usuariologin.usuario.foto}"/>
                                        <h:outputText styleClass="fonteDestacada" value="#{usuariologin.usuario.nome} #{usuariologin.usuario.sobrenome}"/>
                                        <h:outputText styleClass="data" value="#{postagem.dataHora}"/>
                                    </div>
                                    <!--                                Conteúdo da postagem-->
                                    <div class="box-postagem-assunto">
                                        <h:outputText  value="#{postagem.conteudo}"/>
                                        <br></br> <p></p> <h:outputText  value=""/>
                                        <h:outputText value="#{postagem.comentario}"/>
                                    </div>
                                    
                                    <!--                                Aqui deve ficar um datatable com os comentários-->
                                    <h:form>
                                        <div class="box-postagem-assunto">
                                            <ui:repeat id="display" value="#{postagem}" var="comentario" >
                                                
                                                    <p:graphicImage styleClass="box-postagem-imgshortcut" library="usuario" name="#{usuariologin.usuario.foto}"/>
                                                    <h:outputText value="#{comentario.conteudo}"/>
                                                
                                            </ui:repeat>

                                            <p:inputTextarea label="Descrição"  value="#{usuariologin.textImplace}" styleClass="campoTextArea" />
                                            <p:commandButton value="Comentar" action="#{usuariologin.fazComentario(post )}" > 
                                                <f:setPropertyActionListener target="#{post}" value="#{postagem}" /> 
                                            </p:commandButton>
                                        </div>
                                    </h:form>

                                </div> 
                            </ui:repeat>
                        </h:form>






                        <h:form id="postifc">
                            <p:dataGrid var="grid" value="#{usuariologin.listaPostagens}" columns="1" rows="5" paginator="true"  rowsPerPageTemplate="5,10,20"
                                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                                <p:panel header="#{usuariologin.usuario.nome} #{usuariologin.usuario.sobrenome}:" style="text-align:center">
                                    <h:panelGrid columns="1" style="width:100%">
                                        <p:graphicImage styleClass="box-postagem-imgshortcut" library="usuario" name="#{usuariologin.usuario.foto}"/>
                                        <h:outputText value="#{grid.conteudo}" />
                                    </h:panelGrid>
                                </p:panel>
                            </p:dataGrid>  
                        </h:form>
                    </div>  

                </div>

                <div id="conteudo-right">                    
                </div>

            </div>
            <div id="rodape">

            </div>

        </div>

        <p:dialog header="Disciplinas Cadastradas" widgetVar="disciplinaDialog" resizable="false" id="disciplinaDlg" dynamic="true" 
                  showEffect="fade" hideEffect="explode" modal="true">
            <p:dataTable id="table-disciplinas" value="#{usuariologin.usuario.disciplinas}" var="disciplina" tableStyle="width:100%" >
                <p:column headerText="NOME">  
                    <h:outputText value="#{disciplina.nome}" />  
                </p:column>

                <p:column headerText="CURSO">  
                    <h:outputText value="#{disciplina.curso.nome}" />  
                </p:column>

                <p:column style="width:40px">  
                    <p:commandButton id="selectButton" update=":form:display" action="paginaVerDisciplina.xhtml" oncomplete="disciplinaDialog.hide()" icon="ui-icon-note" title="Ver">  
                        <f:setPropertyActionListener value="#{disciplina}" target="#{usuariologin.disciplinaSelecionada}" />
                    </p:commandButton>  
                </p:column>
            </p:dataTable>
        </p:dialog>

    </h:body>
</html>
